<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="确认收货"
            :hasBack="true"
            :hasHome="true"
        >
        </common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 确认收货状态 -->
            <div class="confirm-success-info">
                <img
                    class="success-icon"
                    src="@/assets/images/orderConfirm/success.png"
                />
                <span class="success-tips">商品已确认签收</span>
            </div>
            <!-- 确认收货状态 -->

            <!-- 收货成功按钮组件 -->
            <div class="success-ctr">
                <span
                    class="ctr-btn"
                    @click="goComment(orderInfo.id)"
                >立即评价</span>
                <router-link
                    tag="span"
                    to="/"
                    class="ctr-btn"
                >返回商城</router-link>
            </div>
            <!-- 收货成功按钮组件 -->

            <!-- 地址展示组件 -->
            <div class="address">
                <img
                    src="@/assets/images/orderConfirm/address.png"
                    class="address-icon"
                >
                <div class="address-info">
                    <div class="address-name-phone">{{orderInfo.name}} {{orderInfo.phone}}</div>
                    <div class="address-detail">{{orderInfo.region_txt}}{{orderInfo.detail}}</div>
                </div>
            </div>
            <!-- 地址展示组件 -->

            <!-- 订单信息组件 -->
            <div class="order-info-box">
                <div class="order-info-main">
                    <div class="order-info-item">
                        <div class="order-info-item-name">订单金额</div>
                        <div class="order-info-item-detail">￥{{orderInfo.money_total | currency}}</div>
                    </div>
                    <div class="order-info-item">
                        <div class="order-info-item-name">订单编号</div>
                        <div class="order-info-item-detail">{{orderInfo.sn}}</div>
                    </div>
                    <div class="order-info-item">
                        <div class="order-info-item-name">交易时间</div>
                        <div class="order-info-item-detail order-status">{{orderInfo.add_time}}</div>
                    </div>
                </div>
            </div>
            <!-- 订单信息组件 -->

            <!-- 百领爆品推荐组件 -->
            <intro-goods
                :goodsList="goodsList"
                introTitle="百领爆品"
            ></intro-goods>
            <!-- 百领爆品推荐组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import IntroGoods from '@/components/IntroGoods'
export default {
    name: 'ReceiveConfirm',
    components: {
        CommonHeader,
        CommonScroll,
        IntroGoods
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            goodsList: [],
            orderInfo: ''
        }
    },
    mounted() {
        this.getOrderDetail()
    },
    methods: {
        getOrderDetail() {
            let postData = this.qs.stringify({
                id: this.$route.query.orderId
            })
            this.axios.post('/api/orders/info.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.orderInfo = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        goComment(id) {
            this.$router.push({
                path: '/commentList',
                query: { orderId: id }
            })
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus">
.confirm-success-info
    display flex
    align-items center
    justify-content center
    height 2.4rem
    background #f3fded
    .success-icon
        width 0.67rem
        height 0.67rem
    .success-tips
        font-size 0.44rem
        color #48bd15
        margin-left 0.26rem
.success-ctr
    display flex
    align-items center
    justify-content center
    height 2.13rem
    background #fff
    .ctr-btn
        margin 0 0.24rem
        width 3.4rem
        line-height 0.98rem
        text-align center
        font-size 0.38rem
        color #d7463c
        border 1px solid #d7463c
        border-radius 3px
        box-sizing border-box
.address
    display flex
    align-items center
    height 2.12rem
    padding 0 0.33rem
    background #fff
    margin-top 0.18rem
    .address-icon
        width 0.37rem
        height 0.46rem
    .address-info
        flex 1
        min-width 1px
        padding 0 0.37rem
        .address-name-phone
            font-size 0.33rem
            color #333
        .address-detail
            font-size 0.33rem
            color #666
            margin-top 0.22rem
            line-height 1.3
.order-info-box
    padding 0 0.26rem
    background #fff
    margin-top 0.18rem
    .order-info-main
        padding 0.37rem 0
        .order-info-item
            display flex
            align-items top
            margin-bottom 0.26rem
            .order-info-item-name
                width 1.85rem
                font-size 0.33rem
                color #999
                line-height 1.3
            .order-info-item-detail
                flex 1
                min-width 1px
                font-size 0.33rem
                color #333
                line-height 1.3
        .order-info-item:last-child
            margin 0
</style>


